<template>
    <div class="header">
        <div class="title">DICT项目管理系统数智化工作台</div>
        <div class="tab-list">
            <div class="tab-item" :class="active == '0' && 'tab-item-active'" @click="changeActive('0')">我的业务</div>
            <div class="tab-item" :class="active == '1' && 'tab-item-active'" @click="changeActive('1')">场景化商机调度—政务外网</div>
             <div class="tab-item" :class="active == '4' && 'tab-item-active'" @click="changeActive('4')">场景化商机调度—政务云</div>
            <div class="tab-item" :class="active == '2' && 'tab-item-active'" @click="changeActive('2')">特色客户商机调度—大庆油田</div>
            <div class="tab-item" :class="active == '3' && 'tab-item-active'" @click="changeActive('3')">数字政府</div>
            <div class="tab-item" :class="active == '5' && 'tab-item-active'" @click="changeActive('5')">ToG“一棵树”2.0</div>
            <div class="tab-item" :class="active == '6' && 'tab-item-active'" @click="changeActive('6')">ToG“一棵树”3.0</div>
        </div>
        <el-select class="select-box-year" v-model="year" placeholder="请选择" @change="changeYear" v-if="active == '0'">
            <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-select class="select-box" v-model="value" placeholder="请选择" @change="changeOrg"
            :disabled="orgCode != '10008'" v-if="active == '0'">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </div>
</template>
<script>
import { active } from 'sortablejs'

export default {
    name: 'Header',
    data() {
        return {
            active: '0',
            year: String(new Date().getFullYear()),
            yearList: [
                {
                    value: 'all',
                    label: '全部'
                }
            ],
            options: [{
                value: '10008',
                label: '黑龙江省'
            }, {
                value: '10197',
                label: '省政企'
            }, {
                value: '30182',
                label: '哈尔滨市‌'
            }, {
                value: '30183',
                label: '齐齐哈尔市'
            }, {
                value: '30184',
                label: '牡丹江市'
            }, {
                value: '30185',
                label: '佳木斯市'
            }, {
                value: '30186',
                label: '大庆市'
            }, {
                value: '30187',
                label: '伊春市‌'
            }, {
                value: '30188',
                label: '鸡西市‌'
            }, {
                value: '30189',
                label: '鹤岗市‌'
            }, {
                value: '30190',
                label: '双鸭山市'
            }, {
                value: '30191',
                label: '‌七台河市‌'
            }, {
                value: '30192',
                label: '绥化市‌'
            }, {
                value: '30193',
                label: '黑河市‌'
            }, {
                value: '30194',
                label: '大兴安岭'
            }],
            value: '10008',
            orgCode: '10008'
        }
    },
    mounted() {
        let query = this.$route.query
        this.orgCode = query.orgCode || '10008'
        sessionStorage.setItem('orgCode', this.orgCode)
        this.value = query.orgCode || '10008'
        this.$emit('changeOrg', this.value)
        for (let i = new Date().getFullYear(); i >= 2023; i--) {
            this.yearList.push({
                value: String(i),
                label: i + '年'
            })
        }
    },
    methods: {
        changeOrg(val) {
            this.$emit('changeOrg', val)
        },
        changeYear(val) {
            this.$emit('changeYear', val)
        },
        changeActive(val) {
            if(val == '3'){
                window.open(governmentLink)
                return
            }
            this.active = val
            this.$emit('changeActive', val)
        }
    }
}
</script>
<style lang="scss" scoped>
.header {
    width: 100%;
    height: 64px;
    background: #fff;
    color: #000;
    // position: sticky;
    top: 0;
    left: 0;
    z-index: 9999;
    border-bottom: 1px solid #f0f7fd;
}

.title {
    font-size: 24px;
    line-height: 64px;
    margin-left: 30px;
    font-weight: bold;
}

.select-box-year {
    position: absolute;
    right: 16px;
    top: 14px;
    width: 130px;
}

.select-box {
    position: absolute;
    right: 160px;
    top: 14px;
    width: 130px;
}

::v-deep .el-input__inner {
    // border: 1px solid #8ac3ff !important;
    // color: #fff !important;
    // background-color: transparent !important;
    font-size: 16px;
}

// ::v-deep .el-select .el-input .el-input__icon {
//     color: #ffffff;
// }
.tab-list {
    display: flex;
    position: absolute;
    top: 18px;
    left: 390px;
    cursor: pointer;
    font-size: 14px;

    .tab-item {
        color: #0b82ff;
        margin: 0 10px;
        border: 1px solid #0b82ff;
        border-radius: 100px;
        padding: 5px 10px;

        &:hover {
            background: #edf2fe;
        }
    }

    .tab-item-active {
        background: #0b82ff;
        color: #fff;

        &:hover {
            background: #419afa;
        }
    }
}
</style>